<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情</title>
    <link rel="stylesheet" href="./css/detail.css">
    <link rel="stylesheet" href="./layui-v2.5.6/layui/css/layui.css">
    
</head>

<body>
    <div id="head"></div>
    <div class="box">
        <div class="left">
            <div class="aaa">
                <img src="" alt="" class="leftImg">
                <div class="a"></div>
            </div>
            <div class="box-img">
                <img src="" alt="" class="st">
                <!-- <img src="../0728/girlbig1.jpg" alt="" class="st"> -->
                <!-- <img src="../0728/girlbig1.jpg" alt="" class="st">
                <img src="../0728/girlbig1.jpg" alt="" class="st"> -->
            </div>
        </div>
        <div class="right">
            <img src="" alt="" id="bigImg">
        </div>
    </div>
  

    <div class="detail">
        <h2>8H物理防螨天然乳胶床垫M2</h2>
        <p class="detail-c">新用户精选智能产品，领券更优惠>></p>
        <p class="detail-a">小米816感恩季！8月8日限时特惠到手价269！ 100档风速调节 / 小爱语音控制</p>
        <p class="detail-b">￥125</p>
        <div class="count">
            <h3>数量 :</h3>
            <button class="jian">➖</button>
            <input type="text" value="1" class="count-input">
            <button class="jia">➕</button>
        </div>


        <button class="layui-btn layui-btn-danger" id="cart">&nbsp&nbsp&nbsp 加入购物车&nbsp&nbsp&nbsp </button>
    </div>
    <div class="detail-d">
        <ul>
            <li>商品详情</li>
            <li>评论</li>
            <li>常见问题</li>
        </ul>
    </div>
    <div id="main"> 
            <img src="https://img.youpin.mi-img.com/shopmain/07cc27993c83ef4cbd5d3c10c61aeae0.jpg" alt="">
    </div>
    <div id="foot"></div>
</body>
<script src="./jquery-1.11.3.js"></script>
<script src="./layui-v2.5.6/layui/layui.js"></script>
<script src="./js/detail.js" type="module"></script>

<script>
    layui.use('carousel', function () {
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1'
            , width: '450' //设置容器宽度
            , height: '450px'
            , arrow: 'always' //始终显示箭头
            , anim: 'fade' //切换动画方式
        });
    });
</script>
<script>
    var sImgs = document.querySelectorAll('.st');
    var leftImg = document.querySelector('.leftImg');
    var aaa = document.querySelector('.aaa');
    var a = document.querySelector('.a');
    var right = document.querySelector('.right');
    
    sImgs.forEach(function(val,i){
        val.onclick = function(){
            leftImg.src = arr[i]
            bigImg.src = arr[i]
        }
    })
    aaa.onmouseenter = function(){
        a.style.display = 'block';
        right.style.display = 'block'
    }
    aaa.onmouseleave = function(){
        a.style.display = 'none';
        right.style.display = 'none'
    }
    aaa.onmousemove = function(e){
        e = e || window.event;
        var maxW = leftImg.clientWidth - a.offsetWidth;
        var maxH = leftImg.clientHeight - a.offsetHeight;
        var x = e.pageX - a.offsetWidth*2.7;
        var y = e.pageY - a.offsetHeight*1.4;
        if(x < 0){
            x = 0
        }
        if(y < 0){
            y = 0
        }
        if(x > maxW){
            x = maxW
        }
        if(y > maxH){
            y = maxH
        }
        a.style.left = x + 'px';
        a.style.top = y + 'px';

        var scale = (bigImg.offsetWidth - right.offsetWidth) / maxW;
        bigImg.style.left = -scale * x + 'px';
        bigImg.style.top = -scale * y + 'px';
    }
    
    
</script>

</html>